<!-- Dom模板 -->
<template>
  <div class="swipers">
    <!-- Dom内容 -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(banner, index) in this.bannerList" :key="index">
        <img :src="banner" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  props: ['bannerList'],
  data() {
    return {
      msg: "测试",
      
      // bannerList: [
      //   "https://i04piccdn.sogoucdn.com/5b8e9b588ee6ff06",
      //   "https://i01piccdn.sogoucdn.com/747132caa00c6bb0",
      //   "https://i01piccdn.sogoucdn.com/4347b3060695cb2d",
      //   "https://i02piccdn.sogoucdn.com/c4e7021b4ab1def7",
      //   "https://i04piccdn.sogoucdn.com/10ad22c063fd70fa",
      //   "https://i02piccdn.sogoucdn.com/f9881bfa7735b7fc",
      // ],
      swiperOptions: {
        loop: true, // 环路翻滚
        autoplay: {
          delay: 2000, // 延时
          stopOnLastSlide: false, // 最后一个slide时是否继续轮播
          disableOnInteraction: false, // 点击小点是否终止自动轮播
        },
        effect: "fade",
      },
    };
  },
  //组件的挂载
  components: {},
  // Vue方法定义
  methods: {},
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  // 生命周期 - 数据更新完成（访问DOM元素）
  updated() {},
  // 生命周期 - 组件销毁
  destroyed() {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.swipers .swiper-wrapper img {
  width: 100%;
  height: 9%;
  float: left;
}
.swipers {
  position: relative;
  z-index: 0;
}
.swiper-pagination {
  bottom: 26px !important;
}
.swiper-pagination p {
  background: rgba(255, 255, 255, 0.5);
}
</style>